<script setup>
import {ajax, util, hasPermission, format} from 'framework'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {modal} from 'heyui'

const router=useRouter()

const {params} = defineProps({
  params:{
    type:Object,
    default:{}
  }
})

//数据集
const ds = ref({})
const showSearch = ref(false), selects = ref([]);
//对话框的引用,可通过dlg.value.ref获取页面的引用
const dlg = ref({})

const onDsInit=(ds)=>{
  ds.params.appId=params.value.app
}
function search() {
  selects.value = []
  ds.value.reload()
}

function selected(v) {
  selects.value = v.map(it => util.fields(it, 'id'))
}

async function add() {
  await dlg.value.open()
  search()
}

function editFirst() {
  if (selects.value.length == 0) {
    return;
  }
  edit(selects.value[0])
}

async function edit(v) {

  await dlg.value.open(util.fields(v, 'id'))
  search()
}

async function del(id) {
  await ajax.post('function/delete', [id])
  search()
}
function toDebug(){
  ajax.get("application/detail", {id:params.value.app}).then(r => {
   // open("./chat.html?app="+r.data.appKey+"&name="+r.data.name,'chat')
    modal({
      title:r.data.nam,
      // width:400,
      content:`<iframe src="./chat.html?app=${r.data.appKey}&name=${r.data.name}" style="width: 400px;height: 100%;border:none;"/>`,
      transparent:false,
      buttons:[],
      hasDivider:false,
      hasCloseIcon:true,
      closeOnMask:false,
      hasMask:false,
      type:'drawer-right'
    })
  })

}
</script>
<template>
  <DataTable url="function/list" ref="ds" @init="onDsInit" pageable>
    <template #tools="table">
      <Button icon="jeicon-take-back" @click="router.go(-1)">返回</Button>
      <Button icon="jeicon-add" color="primary" @click="add">添加功能</Button>
      <Button icon="jeicon-defect-bug" color="primary" @click="toDebug">调试</Button>
    </template>
    <template #default="table">
      <div style="position: relative;height: 100%">
        <Table :datas="table.data" :loading="table.loading" >
          <TableItem title="序号" prop="$serial" :width="50"></TableItem>
          <TableItem title="名称" prop="name"></TableItem>
          <TableItem title="功能描述" prop="description"></TableItem>
          <TableItem title="直接结果">
            <template #default="{data}">
              <Checkbox :checked="data.direct"></Checkbox>
            </template>
          </TableItem>
          <TableItem title="">
            <template #default="{data}">
              <LinkButtons>
                <Button @click="edit(data)">编辑</Button>
                <Poptip  content="确定删除所选记录？"
                        @confirm="del(data.id)">
                  <Button icon="h-icon-trash" >删除</Button>
                </Poptip>
              </LinkButtons>
            </template>
          </TableItem>
        </Table>
      </div>

    </template>
  </DataTable>
  <Dialog href="ai/functionDialog.vue" ref="dlg" type="drawer-right" hasDivider hasCloseIcon>
    <template #header>AI功能调用</template>
    <template #footer="dlg">
      <Button @click="dlg.cancel">取消</Button>
      <Button :loading="dlg.loading" color="primary" @click="dlg.submit">确认</Button>
    </template>
  </Dialog>
</template>

